<template>
	<view class="clearfix">
		<view class="bg">
		</view>
		<view class="base-info">
			<image class="avatar" :src="formData.avatar" mode="widthFix" />
			<view class="base-info__right">
				<block v-if="formData.name">
					<view class="name">
						{{formData.name}}
					</view>
					<view class="sex">
						{{formData.sex==1?'男':'女'}}
					</view>
					<view class="age">
						{{formData.age}}岁
					</view>
				</block>
				<block v-else>
					<text style="color: rgb(104, 105, 105);"> 暂未完善信息</text>
				</block>
			</view>
		</view>
		<view class="separate">

		</view>
		<view class="grid">
			<navigator class="grid-item" hover-class="none" :url="`./baseInfo?userId=${userId}`">
				<image src="https://pic.kanglailab.com/common/base-info.png" mode="widthFix" />
				<view>
					基本信息
				</view>
			</navigator>
			<navigator class="grid-item" hover-class="none" :url="`./healthy?userId=${userId}`">
				<image src="https://pic.kanglailab.com/common/healthy.png" mode="widthFix" />
				<view>
					健康信息
				</view>
			</navigator>
			<navigator class="grid-item" hover-class="none" :url="`./relationList?userId=${userId}`">
				<image src="https://pic.kanglailab.com/common/relation.png" mode="widthFix" />
				<view>
					社会关系
				</view>
			</navigator>
			<navigator class="grid-item" hover-class="none" :url="`./hobby?userId=${userId}`">
				<image src="https://pic.kanglailab.com/common/hobby.png" mode="widthFix" />
				<view>
					兴趣爱好
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {ref,unref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import personnelApi from "@/api/personnel"
	const formData = ref({})
	const userId = ref("")
	const getData = async ()=>{
		const {data} = await personnelApi.getInfoDataByUser({userId:unref(userId)})
		formData.value = data||{}
		!unref(formData).avatar&&(formData.value.avatar = "/static/images/base/default-avatar.png")
	}
	onLoad((options)=>{
		userId.value = options.userId
		getData()

	})

</script>

<style lang="scss" scoped>
	.bg{
	  background-color: $theme-bg-color;
	  height: 200rpx;
	  position: fixed;
	  width: 100%;
	  top: 0;
	  z-index: -1;
	}
	.base-info{
	  width: 95vw;
	  margin: 50rpx auto 40rpx auto;
	  box-shadow: 0 0 20rpx rgba(10, 10, 10, .2);
	  background-color: white;
	  height:260rpx;
	  border-radius: 20rpx;
	  display: flex;
	  align-items: center;

	}
	.avatar{
	  width: 170rpx;
	  height:170rpx;
	  margin:0 40rpx 0 30rpx;
	  border-radius: 10%;
	}
	.name{
	  font-size: 36rpx;
	}
	.sex,.age{
	  color: #858282;
	  font-size: 32rpx;
	}
	.separate{
	  height: 20rpx;
	  background-color: #f1f1f1;
	}
	.grid{
	  display: flex;
	  margin-top: 20rpx;
	}
	.grid-item{
	  width: 25%;
	  text-align: center;
	  font-size: 29rpx;
	  color: #5e5c5c;
	}
	.grid-item image{
	  width: 120rpx;
	  height:120rpx;
	}
</style>
